<template>
    <div style="display: flex;align-items: center;">
        <div class="inputDom" :style="myStyles">
            <input v-if="isNumber == 0" class="myInput" :placeholder="hits" v-model="inputValue1"
                :class="isHit1 ? 'pd3' : ''">
            <input v-if="isNumber == 1" class="myInput" :placeholder="hits" v-model="inputValue1"
                :class="isHit1 ? 'pd3' : ''" type="number" oninput="value=value.replace(/[^0-9]/g,'')" >
            <input v-if="isNumber == 2" class="myInput" :placeholder="hits" v-model="inputValue1"
                :class="isHit1 ? 'pd3' : ''" type="number" oninput="value=value.replace(/[^0-9.]/g,'')">
            <div class="leftText">{{ leftText }}</div>
            <div class="errorHit">{{ input1Hit }}</div>
        </div>
        <div style="padding: 0 8px;">-</div>
        <div class="inputDom" :style="myStyles">
            <input v-if="isNumber == 0" class="myInput" :placeholder="hits" v-model="inputValue2"
                :class="isHit2 ? 'pd3' : ''">
            <input v-if="isNumber == 1" class="myInput" :placeholder="hits" v-model="inputValue2"
                :class="isHit2 ? 'pd3' : ''" type="number" oninput="value=value.replace(/[^0-9]/g,'')">
            <input v-if="isNumber == 2" class="myInput" :placeholder="hits" v-model="inputValue2"
                :class="isHit2 ? 'pd3' : ''" type="number" oninput="value=value.replace(/[^0-9.]/g,'')">
            <div class="leftText">{{ leftText }}</div>
            <div class="errorHit">{{ input2Hit }}</div>
        </div>
    </div>
</template>
    
<script>

export default {
    name: 'CommonRangeInput',
    emits: ['returnData', 'clearData', 'mustCount'],
    components: {
    },
    props: {
        isShowLeftText: {
            default: false,
            type: Boolean
        },
        hit: {
            default: '',
            type: String
        },
        leftText: {
            default: '',
            type: String
        },
        myStyles: {
            default: { width: '160px' }
        },
        isMust: {
            default: false,
            type: Boolean
        },
        mustHit: {
            default: '',
            type: String
        },
        isNumber: {
            default: 2,
            type: Number
        },
        insertKey: String,
        default1: {
            default: ','
        },
        default2: {
            default: ','
        },
        max: {
            default: 9999999999,
            type: Number
        },
    },
    data() {
        return {
            inputValue1: this.default1 == "," ? '' : this.default1,
            inputValue2: this.default2 == "," ? '' : this.default2,
            hits: this.hit,
            isHit1: false,
            isHit2: false,
            input1Hit: "",
            input2Hit: ""
        }
    },
    mounted() {
    },
    methods: {
        inputReturn() {
            let flag = true
            if (this.isMust && !this.inputValue1?.trim()) {
                this.hits = this.mustHit
                this.isHit1 = true
                flag = false
            }
            if (this.isMust && !this.inputValue2?.trim()) {
                this.hits = this.mustHit
                this.isHit2 = true
                flag = false

            }
            return flag
        }
    },
    watch: {
        inputValue1: {
            handler(newValue) {
                if (this.inputValue2 == "" || this.inputValue2 == null) {
                    this.input2Hit = this.$t("text.Common.l72") + this.$t('text.Common.l71')
                }
                if (newValue !== "" && newValue > this.inputValue2 && this.input2Hit == "") {
                    this.input1Hit = this.$t("text.Common.l35") + this.$t('text.Common.l71')
                } else if (newValue < this.min) {
                    this.input1Hit = this.$t("text.Common.l37") + this.min + this.$t('text.Common.l71')
                } else if (newValue > this.max) {
                    this.input1Hit = this.$t("text.Common.l38") + this.max + this.$t('text.Common.l71')
                } else {
                    this.input1Hit = ""
                }
                if (this.input2Hit != "" && newValue <= this.inputValue2) {
                    this.input2Hit = ""
                }
                if (newValue == "") {
                    this.input1Hit = this.$t("text.Common.l72") + this.$t('text.Common.l71')
                }
                if (newValue <= this.inputValue2 && this.inputValue1 !== "" && this.inputValue2 !== "") {
                    this.isHit1 = false
                    let temp = { [this.insertKey.split(",")[0]]: this.inputValue1, [this.insertKey.split(",")[1]]: this.inputValue2 }
                    return this.$emit('returnData', temp)
                } else {
                    return this.$emit('clearData', { [this.insertKey.split(",")[0]]: '', [this.insertKey.split(",")[1]]: '' })
                }
            }
        },
        inputValue2: {
            handler(newValue) {
                if (this.inputValue1 == "" || this.inputValue1 == null) {
                    this.input1Hit = this.$t("text.Common.l72") + this.$t('text.Common.l71')
                }
                if (newValue !== "" && newValue < this.inputValue1 && this.input1Hit == "") {
                    this.input2Hit = this.$t("text.Common.l39") + this.$t('text.Common.l71')
                } else if (newValue < this.min) {
                    this.input2Hit = this.$t("text.Common.l37") + this.min + this.$t('text.Common.l71')
                } else if (newValue > this.max) {
                    this.input2Hit = this.$t("text.Common.l38") + this.max + this.$t('text.Common.l71')
                } else {
                    this.input2Hit = ""
                }
                if (this.input1Hit != "" && newValue >= this.inputValue1) {
                    this.input1Hit = ""
                }
                if (newValue == "") {
                    this.input2Hit = this.$t("text.Common.l72") + this.$t('text.Common.l71')
                }
                if (newValue >= this.inputValue1 && this.inputValue1 !== "" && this.inputValue2 !== "") {
                    this.isHit2 = false
                    let temp = { [this.insertKey.split(",")[0]]: this.inputValue1, [this.insertKey.split(",")[1]]: this.inputValue2 }
                    return this.$emit('returnData', temp)
                } else {
                    return this.$emit('clearData', { [this.insertKey.split(",")[0]]: '', [this.insertKey.split(",")[1]]: '' })
                }
            }
        }

    },
    computed: {
    }

}
</script>
    
<style scoped>
.errorHit {
    position: absolute;
    font-size: 12px;
    color: #FFC107;
    top: 25px;
    white-space: nowrap;
}

.inputDom {
    display: flex;
    align-items: center;
    position: relative;
}

.myInput {
    outline: none;
    height: 20px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 8px;
    padding-right: 20px;
    border-radius: 3px;
    font-size: 12px;
    position: relative;
    margin: 1px;
    width: 100%;
}

.myInput:focus {
    border: 1px solid #6698ff;
}

.leftText {
    font-size: 12px;
    color: #999;
    position: absolute;
    right: 12px;
}

.pd3 {
    padding-left: 15px;
    padding-right: 10px;
    color: red;
    border: 1px solid red;
}

.pd3::placeholder {
    color: red;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: none;
}
</style>